<template>  
  <div class="home-page">  
    <h1 class="page-title">欢迎来到首页!</h1>  
    <router-link to="/profile" style="font-size: 25px;">个人简介</router-link> |
    <div class="home-content">  
      <Gitee />  
  
      <div v-if="isLoggedIn" class="todo-container">  
        <todo-list />  
      </div>  
  
      <div class="calculator-container">  
        <odd-sum-calculator :oddSum="oddSum" @update:oddSum="oddSum = $event" />  
      </div>  
  
      <button v-if="isLoggedIn" class="logout-button" @click="logout">注销</button>  
    </div>  
  </div>  
</template>  
  
<script>  
import { ref, computed } from 'vue';  
import { useAuthStore } from '@/stores/auth';  
import Gitee from './Gitee.vue';  
import TodoList from './TodoList.vue';  
import OddSumCalculator from './OddSumCalculator.vue';  
import { useRouter } from 'vue-router';  
  
export default {  
  name: 'Home',  
  components: {  
    TodoList,  
    OddSumCalculator,  
    Gitee  
  },  
  setup() {  
    const authStore = useAuthStore();  
    const isLoggedIn = computed(() => authStore.isLoggedIn);  
    const oddSum = ref(0);  
    const router = useRouter();  
  
    const logout = () => {  
      authStore.logout();  
      router.push('/login');  
    };  
  
    return {  
      isLoggedIn,  
      oddSum,  
      logout  
    };  
  }  
};  
</script>  
  
<style scoped>  
body, html {  
  height: 100%; 
  margin: 0; 
  display: flex;
  justify-content: center;  
  align-items: center; 
  background-color: #f5f5f5;
}  
  
.home-page {  
  height: 125vh;  
  background: linear-gradient(135deg, #fce4fc, #e9b9f2); 
  color: #333;  
  font-family: 'Arial', sans-serif;  
  border-radius: 10px;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  padding: 20px;  
}  
  
.page-title {  
  font-size: 2.5rem;  
  font-weight: bold;  
  text-align: center;  
  margin-bottom: 20px;  
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-top: 0px;  
}  
  
.home-content {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-around;  
  width: 80%;  
  max-width: 800px;
  margin: 0 auto; 
}  
  
.todo-container {  
  margin-bottom: 20px;
}  
  
.calculator-container {  
  margin-bottom: 20px;
}  
  
.logout-button {  
  padding: 10px 20px;  
  border: none;  
  border-radius: 5px;  
  background-color: #ec9bd1;  
  color: white;  
  font-size: 1.2rem;  
  cursor: pointer;  
  transition: background-color 0.3s ease;  
  margin-top: 10px;
}  
  
.logout-button:hover {  
  background-color: #dd7ba9;  
} 
.router-link-active {  
  color: rgb(0, 0, 0);
}   
</style>